<template>
  <div class="pc-fix">
    <div class="container-index">
      <!-- 欢迎页 -->
      <Welcome v-if="!sourceLoaded"/>

      <!-- 主体内容 -->
      <template v-else>
        <!-- 顶部box -->
        <div class="top-box">
          <img class="bg-img" :src="shopInfo.poster" :alt="shopInfo.name">
        </div>

        <!-- 商家信息 -->
        <div class="shopper-info">
          <ShopInfo :data="shopInfo"/>
        </div>

        <!-- 内容部分 -->
        <div class="content-box">
          <!-- 第1部分优惠券 -->
          <div class="part-1">
            <TitleBar class="title-bar" title="微信支付优惠券" desc="微信支付自动抵扣"/>

            <div v-for="(item, index) in wxCoupon" :key="index">
              <QuickCouponCard :type="item.cardType" :data="item"/>
            </div>
          </div>

          <!-- 第2部分优惠券 -->
          <div class="part-2">
            <TitleBar class="title-bar" title="商户优惠券" desc="请向收银员出示优惠券"/>

            <ul class="clearfix">
              <li class="item" v-for="(item, index) in shopCoupon" :key="index">
                <QuickCouponCard type="6" :data="item"/>
              </li>
            </ul>
          </div>

          <!-- 底部信息 -->
          <div class="footer">
            <div style="height: 60px"></div>
            <div class="content">
              <FlexBox justify="space-between" center-v>
                <FlexBox>
                  <img class="icon-logo" :src="require('@assets/images/shopper.png')" alt="">
                  <FlexBox center-v>更多商家优惠</FlexBox>
                </FlexBox>
                <img class="icon" :src="require('@assets/images/arrow_right.png')" alt="">
              </FlexBox>
            </div>

            <FlexBox center-h-v class="bottom">
              活动规则
              <span style="padding: 0 20px">|</span>
              联系客服
            </FlexBox>
          </div>
        </div>

        <!-- 底部支付栏 -->
        <div class="bottom-bar">
          <FlexBox center-v justify="space-between">
            <FlexBox center-v>
              <img class="icon"
                   :src="require('../../assets/images/pay-1.png')"
                   alt="">
              <div class="text">专享超优汇率券生效中</div>
              <img class="icon" :src="require('../../assets/images/arrow_right.png')" alt="">
            </FlexBox>
            <Btn bg-color="#00C250" radius="4px" height="44px">
              <img class="btn-icon"
                   :src="require('../../assets/images/pay-2.png')"
                   alt="">
              <span>付款</span>
            </Btn>
          </FlexBox>
        </div>

        <!-- 领券mask-1 -->
        <div style="position: absolute; top: 0; left: 0" @touchmove.prevent @scroll.prevent>
          <MaskView class="center-h-v mask-view" v-if="!hiddenMask">
            <FlexBox center-h-v class="position-target">
              <FlexBox center-h direction="column" class="mask-slot">
                <div class="tip font-ping-fang-bold">恭喜你获得：</div>
                <QuickCouponCard type="4" :data="wxCoupon[0]"/>
                <div @click="hiddenMask = !hiddenMask">
                  <Btn bg-color="#00C250" radius="3px" height="44px" style="margin-top: 60px">领取下一张</Btn>
                </div>
              </FlexBox>
              <DecorationBox style="top: 100px"/>
            </FlexBox>
          </MaskView>
        </div>

        <!-- 领券mask-2 -->
        <div v-if="!clearMask" style="position: absolute; top: 0; left: 0" @touchmove.prevent @scroll.prevent>
          <MaskView class="center-h-v mask-view" v-if="hiddenMask">
            <FlexBox center-h-v class="position-target">
              <FlexBox center-h direction="column" class="mask-slot" flex="1">
                <div class="tip font-ping-fang-bold">恭喜你获得：</div>
                <QuickCouponCard type="5" :data="wxCoupon[1]" @stopped="handleStopped"/>
                <div @click="clearMask = true" :style="{visibility: showMoreBtn ? 'visible' : 'hidden'}">
                  <Btn bg-color="#00C250" radius="3px" height="44px" style="margin-top: 60px">领取更多</Btn>
                </div>
              </FlexBox>
              <DecorationBox style="top: 100px"/>
            </FlexBox>
          </MaskView>
        </div>

        <!-- 灰度体验功能 -->
        <div class="gray-function">
          <span v-show="showShareBtn"><img class="icon" :src="require('@assets/images/share.png')" alt=""></span>
          <span v-show="showGiftBtn"><img class="icon" :src="require('@assets/images/gift2.png')" alt=""></span>
        </div>

      </template>
    </div>
  </div>
</template>

<script>
import Welcome from '../../components/welcome/index.vue';
import TitleBar from '@components/title-bar/index.vue';
import CouponCard from '@components/coupon-card/index.vue';
import Btn from '@components/btn/index.vue';
import FlexBox from "@components/flex-box/index.vue";
import QuickCouponCard from "@components/quick-coupon-card/index.vue";
import ShopInfo from "@components/shop-info/index.vue";
import MaskView from "@components/mask-view/index.vue";
import DecorationBox from "@components/decoration-box/index.vue";
import ShopService from "@/services/ShopService";
import CouponService from "@/services/CouponService";
import GrayService from "@/services/GrayService";

export default {
  name: "Index",
  components: {
    DecorationBox,
    MaskView, ShopInfo, QuickCouponCard, FlexBox, Welcome, TitleBar, CouponCard, Btn
  },
  data() {
    return {
      timer: null,
      shopInfo: null,
      wxCoupon: [],
      shopCoupon: [],
      hiddenMask: false,
      clearMask: false,
      showMoreBtn: false,
      sourceLoaded: false,
      // 灰度列表
      grayList: [],
    }
  },
  created() {
    this.initRequest();
  },
  mounted() {
    this.timer = setTimeout(() => {
      this.sourceLoaded = true;
    }, 2000);
  },
  computed: {
    grayData() {
      let obj = null;
      for (let i = 0; i < this.grayList.length; i++) {
        if (this.grayList[i].openid === this.shopInfo.openid) {
          obj = Object.assign({}, this.grayList[i]);
          break;
        }
      }
      return obj;
    },
    showShareBtn() {
      return this.grayData && this.grayData.functions.some(item => item === '分享');
    },
    showGiftBtn() {
      return this.grayData && this.grayData.functions.some(item => item === '赠送');
    }

  },

  methods: {
    // 处理动画停止后的操作
    handleStopped() {
      // console.log("已停止滚动");
      this.showMoreBtn = true;
    },

    // 初始化网络请求
    initRequest() {
      let shopId = this.$route.params.id;
      this.getShopInfoById(shopId || 1);
      this.getWxCoupon();
      this.getShopCoupon();
    },

    // 获取商户信息
    getShopInfoById(id = '1') {
      ShopService.getShopInfoById(id).then(res => {
        this.shopInfo = res;
        this.getGrayList();
      });
    },

    // 获取微信优惠券
    getWxCoupon() {
      CouponService.getWxCoupon().then(res => {
        this.wxCoupon = res;
      });
    },

    // 获取商户优惠券
    getShopCoupon() {
      CouponService.getShopCoupon().then(res => {
        this.shopCoupon = res;
      });
    },

    // 获取灰度名单
    getGrayList() {
      GrayService.getGrayList().then(res => {
        this.grayList = res;
      });
    },
  },

  beforeDestroy() {
    clearTimeout(this.timer);
  }
}
</script>

<style lang="scss" scoped>
.pc-fix {
  @media screen and (min-width: 768px) {
    width: 375px !important;
    height: 100vh;
    margin: 0 auto;
  }
}

.container-index {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  font-family: PingFangSC;
  position: relative;

  .top-box {
    @media screen and (min-width: 768px) {
      width: 375px !important;
      height: 100vh;
    }
    width: 100%;
    height: 200px;
    position: fixed;

    .bg-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
  }

  .shopper-info {
    width: 100%;
    margin-top: 110px;
    z-index: 100;
    justify-content: flex-start
  }

  .content-box {
    position: absolute;
    z-index: 10;
    border-top-left-radius: 12.5px;
    border-top-right-radius: 12.5px;
    background: #F7F7F7;
    top: 190px;
    width: 100%;
    padding: 20px;
    overflow: scroll;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
    }

    .title-bar {
      margin: 20px 0;
    }

    .part-1 {

    }

    .part-2 {
      margin-top: 60px;

      ul {
        list-style: none;
        width: 100%;

        li {
          float: left;

          &:nth-child(odd) {
            padding-right: .5rem;
          }

          &:nth-child(2n) {
            padding-left: .5rem;
          }
        }
      }

      .clearfix::after {
        clear: both;
        content: " ";
      }

      .item {
        width: 50%;

        .diy-coupon-top {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #F15451;

          .title, .type {
            color: black;
            font-weight: 500;
          }

          .discount-box {
            height: 50px;

            .discount {
              font-size: 40px;
              font-family: 黑体;
              font-weight: bold;
            }

            .icon {
              width: 40px;
              height: 40px;
            }
          }

          .unit {

          }

          .usage {
            font-size: 12px;
            opacity: 0.8;
          }
        }
      }
    }

    .footer {
      clear: both;

      .content {
        background-color: #fff;
        padding: 16px;

        .icon-logo {
          width: 50px;
          height: 50px;
        }

        .icon {
          width: 40px;
          height: 40px;
        }
      }

      .bottom {
        color: rgba(0, 0, 0, .6);
        font-size: 13px;
        margin-top: 40px;
        margin-bottom: 70px;
      }
    }
  }

  .mask-view {
    .position-target {
      position: relative;

      .mask-slot {
        width: 66%;
        margin: 0 auto;
        flex: none !important;
        position: relative;

        .tip {
          color: #fff;
          font-size: 21px;
          line-height: 4;
        }
      }
    }

    @media screen and (min-width: 768px) {
      width: 375px !important;
      height: 100vh;
    }
  }

  .bottom-bar {
    @media screen and (min-width: 768px) {
      width: 375px !important;
    }
    position: fixed;
    bottom: 0;
    z-index: 200;
    width: 100%;
    background-color: #fff;
    padding: 10px 20px;
    border-top: 0.5px solid rgba(100, 100, 100, .2);

    .icon {
      width: 26px;
      height: 26px;
      margin-right: 10px;
    }

    .text {
      font-size: 14px;
    }

    .btn-icon {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
  }

  .gray-function {
    position: absolute;
    top: 25px;
    right: 25px;

    .icon {
      width: 30px;
      height: 30px;
      padding: 6px;
      background-color: rgba(0, 0, 0, .25);
      border-radius: 50%;
      margin: 0 10px;
    }
  }
}

</style>


